import React, { Component } from 'react'
import { Card, Form, Input, Button, Icon, Checkbox, message } from 'antd'
class Login extends Component {
  handleSubmit = e => {
    e.preventDefault()
    let userInfo = this.props.form.getFieldsValue()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        message.success(`${userInfo.username}你好,恭喜您登录成功！`)
      }
    })
  }

  render() {
    const FormItem = Form.Item
    const { getFieldDecorator } = this.props.form
    return (
      <div>
        <Card title="登录行内表单">
          <Form layout="inline">
            <FormItem>
              <Input placeholder="请输入用户名" />
            </FormItem>
            <FormItem>
              <Input type="password" placeholder="请输入密码" />
            </FormItem>
            <FormItem>
              <Button type="primary">登录</Button>
            </FormItem>
          </Form>
        </Card>

        <Card title="登录水平表单" style={{ marginTop: 20 }}>
          <Form onSubmit={this.handleSubmit} style={{ width: 300 }}>
            <FormItem>
              {getFieldDecorator('username', {
                rules: [
                  { required: true, message: 'Please input your username!' },
                  { min: 2, max: 4, message: '用户名只能是2~4个长度之间' }
                ]
              })(
                <Input
                  prefix={<Icon type="user" />}
                  placeholder="请输入用户名"
                />
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('password', {
                rules: [
                  { required: true, message: 'Please input your password!' }
                ]
              })(
                <Input
                  prefix={<Icon type="lock" />}
                  type="password"
                  placeholder="请输入密码"
                />
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('remember', {
                initialValue: true,
                valuePropName: 'checked'
              })(<Checkbox>记住密码</Checkbox>)}

              <a href="#home" style={{ float: 'right' }}>
                忘记密码？
              </a>
            </FormItem>
            <FormItem>
              <Button
                htmlType="submit"
                type="primary"
                style={{ width: '100%' }}
              >
                登录
              </Button>
            </FormItem>
          </Form>
        </Card>
      </div>
    )
  }
}

export default Form.create()(Login)
